<template>
    <div class="adminTaskInfo">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-select v-model="searchList.search" placeholder="请选择" size="mini" style="width: 150px;" height="250"
                     @change="onChangesele">
            <el-option v-for="item in searchs" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input :disabled="isdis" clearable placeholder="请输入内容" size="mini"
                    v-model="searchList.searchValue"></el-input>
        </el-form-item>
        <el-form-item style="margin-top:-13px;">
          <el-date-picker
            v-model="value1"
            size="mini"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd HH-mm-ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="getTaskInfoList">搜索</el-button>
          <el-button type="primary" size="mini" :loading="loadings" @click="exportToExcel_two()">导出明细</el-button>
<!--           <el-button type="warning" size="mini" @click="sxss">申诉系统</el-button>-->
        </el-form-item>
      </el-form>
      <el-table @filter-change="filter" :data="tableData" border v-loading="loading"
                @selection-change="handleSelectionChange"
                style="width: 100%;" header-align="center">
        <el-table-column type="selection" width="" align="center"></el-table-column>
        <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
<!--        <el-table-column prop="status" label="发货" width="150" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button type="danger" v-if="scope.row.status == '卖家已发货'">-->
<!--              {{scope.row.status}}-->
<!--            </el-button>-->
<!--            <el-button type="primary" @click="dialog = true;ids = scope.row.id" v-else>-->
<!--              发货-->
<!--            </el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column prop="shipment_name" label="店铺" width="200" align="center"></el-table-column>
        <el-table-column prop="link" label="宝贝ID" width="120" align="center">
          <template slot-scope="props">
            <a target="_blank" :href="'https://mobile.yangkeduo.com/goods.html?goods_id=' + props.row.link">{{props.row.link}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="buyer_nick" label="拼多多号" width="120" align="center"></el-table-column>
        <el-table-column prop="title" label="产品名称" width="260" align="center">
          <template slot-scope="props">
            <a target="_blank" :href="'https://mobile.yangkeduo.com/goods.html?goods_id=' + props.row.link">{{props.row.title}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="tid" label="订单号" width="180" align="center"></el-table-column>
        <el-table-column prop="task_group" label="组" width="" align="center"></el-table-column>
        <el-table-column prop="TotalCommission" label="佣金总金额" width="" align="center"></el-table-column>
        <el-table-column prop="userGroup" label="任务类型" width="" align="center">
          <template slot-scope="props">
            <p style="text-align: center;">{{props.row.task_class == 'pt' ?
              '普通单':(props.row.task_class=='ll'?'浏览单':'评价单')}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="task_bjmoney" label="本金" width="" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.task_bjmoney * 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="logisticcode_time" label="支付时间" width="160" align="center">
          <template slot-scope="props">
            <span>{{ props.row.logisticcode_time }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="交易状态" width="120" align="center"></el-table-column>
        <el-table-column prop="task_refandstatus" label="退款状态" width="120" align="center"></el-table-column>
        <el-table-column prop="status" label="更新订单信息" width="120" align="center">
          <template slot-scope="scope">
            <el-button type="danger" @click="onUpdate(scope.row)" size="mini">更新</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="complaint_status" label="投诉" width="120" align="center">
          <template slot-scope="scope">
            <el-button type="success" v-if="scope.row.complaint_status == 0" size="mini">投诉中</el-button>
            <el-button type="primary" @click="complaint2(scope.row.id)" v-if="scope.row.complaint_status == 1"
                       size="mini">投诉买家
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :page-size="10" @size-change="handleSizeChange" :current-page="searchList.pn" layout="total, sizes, prev, pager, next, jumper"
                     style="text-align:right;margin-top:10px;"
                     :page-sizes="[10, 50, 100, 300,500]"
                     :total="searchList.total" @current-change="pnChange">
      </el-pagination>
      <el-dialog title="" :visible.sync="goodUpdate" custom-class="backupdedleteUserDialog">
        <el-form label-width="110px">
          <el-form-item label="评价">
            <el-input auto-complete="off" type="textarea" autosize v-model='list.text1'
                      :autosize="{ minRows: 3, maxRows: 12}"></el-input>
          </el-form-item>
          <el-form-item label="图片">
            <el-upload ref="upload1" class="upload-demo" action="/upload/goodcomment.php" multiple name="1"
                       :data="list" :auto-upload="false" :limit="6" :on-success="uploadSuccess">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="追加评论">
            <el-input auto-complete="off" type="textarea" v-model='list.text2' autosize
                      :autosize="{ minRows: 3, maxRows: 12}"></el-input>
          </el-form-item>

          <el-form-item label="追加图片" style="">
            <el-upload ref="upload2" class="upload-demo" action="/upload/goodcomment.php" name="2" multiple
                       :data="list" :auto-upload="false" :limit="6" :on-success="uploadSuccess">
              <el-button size="small" type="primary">点击上传</el-button>

            </el-upload>
          </el-form-item>

          <el-form-item label="追加天数" style="float: left;left: 25px">
            <el-input auto-complete="off" v-model='list.num1' style="width: 65px;float: left"></el-input>
          </el-form-item>
          <el-form-item label="追加金额">
            <el-input-number v-model="list.num2" :min="2" :max="6"></el-input-number>
          </el-form-item>

          <el-form-item style="text-align: center;">
            <el-button type="primary" style="width: 200px;" @click="submitUpload">上传</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- <div class="task_footer" v-if="this.default!=='yidaibei.com'&&this.default!=='www.yidaibei.com'">
           <a href="//www.7v2h.cn/index.html#/home" target="_black">真包网（防降权真实包裹）</a>
       </div>-->
      <!-- </mu-paper> -->
      <el-dialog title="上传买家申请退款时间的截图" :visible.sync="dialogVisible5" width="30%">
        <el-form>
          <span>输入退款日期:</span>
          <el-input v-model="dateValue" placeholder="请输入内容"></el-input>
          <div style="height: 10px;"></div>
          <span>添加备注</span>
          <el-input type="textarea" :rows="2" placeholder="请添加备注" v-model="textarea"></el-input>
          <div style="height: 10px;"></div>
          <el-form-item label="添加图片">
            <el-upload class="upload-demo" action="https://apiserver.cc/api/img" multiple :limit="6"
                       :on-success="uploadSuccess1">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible5 = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="选择投诉原因" :visible.sync="dialogVisible" width="30%">
        <span>投诉原因：</span>
        <el-select size="small" v-model="comval" placeholder="请选择" @change="onReason">
          <el-option v-for="item in comvallist" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <!-- <span style="display:block;" v-if="show">投诉原因：</span> -->
        <!-- <el-input v-if="show1" style="width:200px;" v-model="input" placeholder="请输入投诉原因"></el-input> -->
        <el-input style="margin-top:20px;" v-if="show" type="textarea" :rows="2" placeholder="请输入投诉原因"
                  v-model="reasonval"></el-input>
        <!-- <el-radio-group v-model="radio2">
          <el-radio :label="1" @change="show1 = false">买家没按规则去做</el-radio>
          <el-radio :label="2" @change="show1 = false">买家申请退款</el-radio>
          <el-radio :label="3" @change="show1 = true">其他</el-radio>
          <el-input v-if="show1" style="float: left;" v-model="input" placeholder="请输入内容"></el-input>
        </el-radio-group> -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="queding()" :loading="sureloading">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="发货" :visible.sync="dialog" width="30%">
        <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="发货地址" prop="pass">
            <el-select size="small" v-model="ruleForm.fahuoDZ" clearable placeholder="请选择发货地址">
              <el-option v-for="item in tableData_addrss" :key="item.id"
                         :label="item.sender_prov+'-'+item.sender_city+'-'+item.sender_county+'-'+item.sender_address"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="快递类型" prop="checkPass">
            <el-select size="small" v-model="ruleForm.express" @change="onSelectedDrug($event)" clearable
                       placeholder="请选择快递">
              <el-option v-for="item in expressList" :key="item.typeId" :label="'('+item.price+'元)'+item.typeName"
                         :value="item.typeId"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog = false">取 消</el-button>
          <el-button type="primary" @click="Goods()" :loading="sureloading">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
  import {
    userinfo,
    gettaskinfolist,
    updateorderstatu,
    submitcomplaint,
    usergetpriceinfo,
    addresslist,
    tb_ship,
    download_excel,
    empry_typelist
  } from '../../api/api'
  import aestool from '../../tool/aestool.js'
  export default {
    data() {
      return {
        textarea: '',
        loading: true,
        ids: [],
        dateValue: '',
        dialogVisible5: false,
        show: false,
        value1: "",
        reasonval: '',
        ruleForm: {
          fahuoDZ: "",
          express: "",
        },
        dialog: false,
        dialogVisible: false,
        goodUpdate: false,
        default: "",
        taskInfoListTemp: {},
        tableData: [],
        value: "",
        list: {
          num2: 2,
          num1: 0,
          data: []
        },
        filterStatus: {
          task: false,
          goodcomment: false
        },
        loadings: false,
        value2: "2元",
        options2: [
          {
            value: 2,
            label: "2元"
          },
          {
            value: 3,
            label: "3元"
          },
          {
            value: 4,
            label: "4元"
          },
          {
            value: 5,
            label: "5元"
          }
        ],
        options: [
          {
            value: "1",
            label: "订单待审核"
          },
          {
            value: "2",
            label: "收货待审核"
          },
          {
            value: "3",
            label: "完成"
          },
          {
            value: "1001",
            label: "订单手动审核通过"
          },
          {
            value: "2001",
            label: "订单审核失败"
          },
          {
            value: "2002",
            label: "收货审核失败"
          }
        ],
        searchs: [
          {
            value: "user",
            label: "全部"
          },
          {
            value: "babyId",
            label: "宝贝ID"
          },
          {
            value: "shop",
            label: "店铺"
          },
          {
            value: "order",
            label: "订单号"
          },
          {
            value: "refund",
            label: "退款"
          },
          {
            value: "tb_name",
            label: "多多号号"
          }
        ],
        searchList: {
          search: "user",
          searchValue: "",
          filter: {
            status: "",
            goodcomment: ""
          },
          page_size:10,
          pn: 1,
          total: 0
        },
        multipleSelection: [],
        did: '',
        image: '',
        row_data: null,
        comval: '',
        commission: [],
        tableData_addrss: [],
        comvallist: [
          {
            value: "买家没按规则去做",
            label: "买家没按规则去做"
          },
          {
            value: "买家申请退款",
            label: "买家申请退款"
          },
          {
            value: "其他",
            label: "其他"
          },
        ],
        isdis: false,
        id: 0,
        price: "",
        expressList: [],
        sureloading: false,
      };
    },
    computed: {
      tbHeight() {
        return document.body.clientHeight - 350
      }
    },
    methods: {
      handleSizeChange(val){
        console.log(val);
        this.page = this.searchList.pn
        this.searchList.page_size = val
        this.getTaskInfoList()
      },
      //导出明细
      export_subsidiary() {
        this.loadings = true
        let params = {
          excel_per: this.multipleSelection
        }
        download_excel(params).then(res => {
          this.loadings = false
          if (res.Status == 200) {
            window.open(res.Message)
            this.$message.success('导出成功')
          } else {
            this.$message.error('导出失败')
          }
        })
      },
      Goods() {
        this.sureloading = true
        let paramas = {
          task_id: this.ids,
          address_id: this.ruleForm.fahuoDZ,
          empty_type_id: this.ruleForm.express
        }
        tb_ship(paramas).then((res) => {
          console.log(res);
          if (res.Status == 200) {
            this.sureloading = false
            this.$message.success(res.Message)
            this.getTaskInfoList()
            this.dialog = false
          } else {
            this.$message.error(res.Message)
          }
        })
      },
      onSelectedDrug(e) {
        let obj = {};
        obj = this.expressList.find((item) => {//这里的userList就是上面遍历的数据源
          return item.typeId === e;//筛选出匹配数据
        });
        this.price = obj.price
      },
      //获取列表
      getTableData() {
        let params = {
          page: 1
        }
        addresslist(params).then((res) => {
          this.tableData_addrss = res.Data
        })
      },
      //快递类型
      empry_typelists() {
        empry_typelist().then((res) => {
          this.expressList = res.Data
        })
      },
      //获取用户信息
      getUser() {
        userinfo().then(res => {
          if (res.Status == 200) {
            this.$emit('getMoney', res.Data.money)
          } else {
            this.$message.error(res.Message)
          }
        })
      },
      //筛选下改变
      onChangesele(val) {
        if (val == 'refund') {
          this.searchList.searchValue = 'NO_REFUND'
          this.isdis = true
        }
      },
      //投诉原因改变
      onReason(val) {
        if (val == '其他') {
          this.show = true
        }
      },
      //更新订单信息
      onUpdate(row) {
        let params = {
          order: aestool.encrypt(row.tid, 'Updateorderstatu'),
          shop_name: aestool.encrypt(row.shipment_name, 'Updateorderstatu'),
        }
        updateorderstatu(params).then(res => {
          if (res.Status == 200) {
            this.$message.success(res.Message)
            this.getTaskInfoList()
          } else {
            this.$message.error(res.Message)
          }
        })
      },
      confirm() {
        if (this.row_data.info) {
          this.$alert(this.row_data.info, '买家信息', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `action: ${action}`
              });
            }
          });
        } else {
          if (this.dateValue == '') {
            this.$message.error('退款时间不能为空！');
          } else {
            let _this = this;
            // _this.$http
            //   .post("/api/api.php", {
            //     id: "uptk",
            //     taskId: _this.row_data.id,
            //     img:_this.image,
            //     remark:_this.textarea,
            //     refund_time:_this.dateValue
            //   })
            //   .then(function (response) {
            //     _this.$message({
            //       type: response.data.status,
            //       message: response.data.msg
            //     });
            //     _this.getTaskInfoList();
            //   });
          }

        }
      },
      uploadSuccess1(a) {
        this.image = a.data.url
        this.item3 = a.data.send_time
      },
      complaint2(b) {
        this.id = b
        this.dialogVisible = true
      },
      queding() {
        if (this.comval == '其他' && this.reasonval == '') {
          this.$message.error('请填写投诉原因！')
        } else {
          this.sureloading = true
          let temp
          if (this.comval == '其他') {
            temp = this.reasonval
          } else {
            temp = this.comval
          }
          let params = {
            id: this.id,
            reason: temp
          }
          submitcomplaint(params).then(res => {
            this.sureloading = false
            if (res.Status == 200) {
              this.dialogVisible = false
              this.$message.success(res.Message)
              this.getTaskInfoList()
            } else {
              this.$message.error(res.Message)
            }
          })
        }
      },
      tk(a) {
        this.row_data = a
        this.dialogVisible5 = true
      },
      pnChange(pn) {
        this.searchList.pn = pn;
        this.getTaskInfoList();
      },
      filter(value) {
        value.filterUser
          ? (this.searchList.filter.user = value.filterTask[0])
          : (this.searchList.filter.status = value.filterTask[0]);
        this.getTaskInfoList();
      },
      getCommission() {
        let _this = this;
        usergetpriceinfo().then(res => {
          _this.commission = res.Data.info
          //       _this.xswl = res.Data.xswl
          //       _this.money = res.Data.money'
        })
      },
      getTaskInfoList() {
        let _this = this
        console.log(_this.value1);
        var searchListParams = {
          Tfcondition: _this.searchList.search,
          Wherecondition: _this.searchList.searchValue,
          Page: _this.searchList.pn,
          page_size:_this.searchList.page_size,
          begintime: _this.value1[0],
          end_time: _this.value1[1],
        }
        gettaskinfolist(searchListParams).then(res => {
          _this.loading = false
          if (res.Status == 200) {
            let temp = res.Data
            let ipos
            temp.forEach(ele => {
              ipos = ele.logisticcode_time.indexOf("+")
              ele.logisticcode_time = ele.logisticcode_time.replace(/T/g, " ").substring(0, ipos)
            })
            _this.tableData = temp.map((item) => {
              if (Number(item.task_bjmoney) < 50 && Number(item.task_bjmoney) > 0) {
                _this.$set(item, 'TotalCommission', _this.commission[0])
              } else if (Number(item.task_bjmoney) < 100 && Number(item.task_bjmoney) >= 50) {
                _this.$set(item, 'TotalCommission', _this.commission[1])
              } else if (Number(item.task_bjmoney) < 150 && Number(item.task_bjmoney) >= 100) {
                _this.$set(item, 'TotalCommission', _this.commission[2])
              } else if (Number(item.task_bjmoney) < 250 && Number(item.task_bjmoney) >= 150) {
                _this.$set(item, 'TotalCommission', _this.commission[3])
              } else if (Number(item.task_bjmoney) < 350 && Number(item.task_bjmoney) >= 250) {
                _this.$set(item, 'TotalCommission', _this.commission[4])
              } else if (Number(item.task_bjmoney) < 450 && Number(item.task_bjmoney) >= 350) {
                _this.$set(item, 'TotalCommission', _this.commission[5])
              } else if (Number(item.task_bjmoney) < 500 && Number(item.task_bjmoney) >= 450) {
                _this.$set(item, 'TotalCommission', _this.commission[6])
              } else if (Number(item.task_bjmoney) < 800 && Number(item.task_bjmoney) >= 500) {
                _this.$set(item, 'TotalCommission', _this.commission[7])
              } else if (Number(item.task_bjmoney) <= 1000 && Number(item.task_bjmoney) >= 800) {
                _this.$set(item, 'TotalCommission', _this.commission[8])
              }
              return item
            })
            console.log(_this.tableData);
            _this.searchList.total = parseInt(res.Count);
          } else {
            this.$message.error(res.Message)
          }
        })
      },
      handleSelectionChange(val) {
        console.log(val, 'val');
        let arr = []
        val.forEach((item, index) => {
          if (val[index].task_class == 'pj') {
            val[index].task_class = '评价单'
          } else if (val[index].task_class == 'll') {
            val[index].task_class = '浏览单'
          } else if (val[index].task_class == 'pt') {
            val[index].task_class = '普通单'
          } else if (val[index].task_class == 'gy') {
            val[index].task_class = '隔夜单'
          }
          arr.push({
            shopname: val[index].shipment_name,
            baby_id: val[index].link,
            wwname: val[index].buyer_nick,
            goodsinfo: val[index].title,
            order_id: val[index].tid,
            group: val[index].task_group,
            bmoney: val[index].task_bjmoney.toString(),
            com_money: val[index].TotalCommission.toString(),
            task_type: val[index].task_class,
            pay_time: val[index].logisticcode_time,
          })
        })
        console.log(arr);
        this.multipleSelection = arr
      },
      exportToExcel_two() {
        require.ensure([], () => {
          const {
            export_json_to_excel
          } = require('../../excel/Export2Excel');
          const tHeader = ['店铺名称', '宝贝ID', '拼多多号名字', '商品名称', '订单ID', '分组', '本金', '佣金',
            '任务类型', '支付时间'];
          const filterVal = ['shopname', 'baby_id', 'wwname', 'goodsinfo', 'order_id', 'group', 'bmoney',
            'com_money', 'task_type', 'pay_time'];
          var arring = this.multipleSelection
          const list = arring;
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, '订单明细excel');
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      uploadSuccess() {
      },
      submitUpload() {
        this.$refs.upload1.submit();
        this.$refs.upload2.submit();
      }
    },
    mounted() {
      this.default = window.location.host;
      this.getCommission();
      this.getTaskInfoList();
      this.getUser()
    }
  };
</script>

<style scoped>
  .el-picker-panel {
    top: 580px !important;
  }

  .el-input--suffix .el-input__inner {
    padding-right: 0;
  }

  .el-input__inner {
    margin-top: 20px;
  }

  .paperz {
    height: 90%;
    padding: 15px;
  }

  .demo-table-expand {
    font-size: 0;
    margin-left: 50px;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .el-form-item__content, .el-form-item__label {
    margin-top: -14px;
    margin-left: 10px;
  }

  .dedleteUserDialog {
    width: 980px;
  }

  .task_footer {
    position: fixed;
    left: 20px;
    bottom: 20px;
  }

  .task_footer a {
    text-decoration: underline;
  }
</style>
